import React, { Component } from 'react'
import { Form, Input, Button, message, Checkbox, Row, Col } from 'antd'
import styles from './index.less'
import { perm, role } from '../../../api/index'


export default class index extends Component {
    componentDidMount() {
        perm.getList().then(data => {
            if (data.code >= 200 && data.code < 300) {
                console.log(data.data);
                this.setState({ data: data.data })
            }
        })
    }

    state = {
        data: [],
        formRules: {
            description: [
                {
                    required: true,
                    message: '角色描述不能为空',
                },
            ],
            name: [
                {
                    required: true,
                    message: '角色名称不能为空',
                },
            ],
            permIds: [
                {
                    required: true,
                    message: '必须选择一项',
                },
            ]
        },
        loading: false,
    }

    onFinish = async (values) => {
        this.setState({ loading: true })
        console.log(values);
        const data = await role.addRole(values)
        if(data.code===200){
            message.success('新增成功')
            this.formNode.resetFields(['name','description','permIds'])
        }else{
            message.error('新增失败')
            console.log(data);
        }
        this.setState({ loading: false })
    }

    onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo)
    }

    render() {
        const { formRules, loading, data } = this.state
        return (
            <div id="role">
                <div className={styles.form}>
                    <Form ref={node => { this.formNode = node }} onFinish={this.onFinish} onFinishFailed={this.onFinishFailed} layout="vertical">
                        <Form.Item rules={formRules.name} name='name' label="角色名称:">
                            <Input disabled={loading} />
                        </Form.Item>
                        <Form.Item rules={formRules.description} name='description' label="角色描述:">
                            <Input disabled={loading} />
                        </Form.Item>

                        <Form.Item rules={formRules.permIds} name='permIds' label="角色权限:">
                            <Checkbox.Group>
                                <Row>
                                    {data.map(item => (
                                        <Col key={item.id}>
                                            <Checkbox value={item.id}>{item.name}</Checkbox>
                                        </Col>
                                    ))}
                                </Row>
                            </Checkbox.Group>
                        </Form.Item>


                        <Form.Item wrapperCol={{ offset: 9, span: 16 }}>
                            <Button htmlType='submit' loading={loading}>新增</Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        )
    }
}
